<template>
  <div>
    <el-drawer
      :title="`${title}通知公告`"
      :visible.sync="drawer"
      direction="rtl"
      size="45%"
      @close="close"
    >
      <el-form ref="form" :model="formData" :rules="rulesForm" label-position="top">
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属小区" prop="community_code">
              <SelectView v-model="formData.community_code" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动主题" prop="title">
              <el-input v-model="formData.title" size="small" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="活动地点" prop="place">
              <el-input v-model="formData.place" size="small" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="举办单位" prop="sponsor_unit">
              <el-input v-model="formData.sponsor_unit" size="small" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="活动开始时间" prop="begin_time">
              <el-date-picker
                v-model="formData.begin_time"
                size="small"
                value-format="timestamp"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动结束时间" prop="end_time">
              <el-date-picker
                v-model="formData.end_time"
                size="small"
                value-format="timestamp"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="活动状态" prop="status">
              <el-radio v-model="formData.status" label="0">无效</el-radio>
              <el-radio v-model="formData.status" label="1">有效</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片">
              <UploadImage v-model="formData.photo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="活动内容">
          <quill-editor v-model="formData.content" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnOk">确定</el-button>
          <el-button @click="drawer=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import SelectView from './selectView.vue'
import UploadImage from './upload-image.vue'
import { quillEditor } from 'vue-quill-editor'
import { echoActivityAPI, editActivityAPI, addActivityAPI } from '@/api/hujingbo/activity'
export default {
  name: 'AsideView',
  components: {
    SelectView,
    UploadImage,
    quillEditor
  },
  data() {
    return {
      drawer: false, // 弹窗开关
      formData: {
        begin_time: '',
        community_code: '',
        content: '',
        end_time: '',
        photo: '',
        place: '',
        sponsor_unit: '',
        status: '0',
        title: ''
      },
      rulesForm: {
        title: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        community_code: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        place: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        sponsor_unit: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        begin_time: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  methods: {
  // 回显
    async echo(id) {
      const res = await echoActivityAPI(id)
      this.formData = res.data
      this.formData.status = String(res.data.status)
    },
    // 提交
    async btnOk() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        await editActivityAPI(this.formData)
      } else {
        // const {} = this.formData
        await addActivityAPI(this.formData)
      }
      this.$message.success('操作成功')
      this.drawer = false
      this.$emit('btnOk')
    },
    // 关闭
    close() {
      this.$refs.form.clearValidate()
      this.formData = {
        begin_time: '',
        community_code: '',
        content: '',
        end_time: '',
        photo: '',
        place: '',
        sponsor_unit: '',
        status: '0',
        title: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form{
  padding:0 30px;
}
  ::v-deep .ql-editor {
    height: 200px;
  }
</style>
